<template>
  <div>
    <div class="FollowUpStatistics">
      <!-- <div class="figure customerFollowUp">
        <p class="title">潜客跟进</p>
        <div class="figureContent">
          <Chart1 ref="Chart1" :option="option1" :containerStyle="{height: '300px'}"/>
        </div>
      </div>-->
      <div
        class="figure customerFollowUp"
        :style="roleList.NetSalesManager || roleList.ShowroomManager ? 'width:49.6%;':'flex:1'"
      >
        <p class="title">跟进走势</p>
        <!-- 潜客跟进日期走势改为“跟进走势” -->
        <div class="figureContent">
          <Chart1 ref="Chart2" :option="option2" :containerStyle="{height: '300px'}" />
        </div>
      </div>
      <div
        class="figure customerFollowUp"
        style="width:49.6%;"
        v-if="roleList.NetSalesManager || roleList.ShowroomManager"
      >
        <p class="title">
          团队跟进情况
          <i class="el-icon-zoom-in" @click="consultShowVisible"></i>
        </p>
        <div class="figureContent">
          <Chart1
            ref="Chart3"
            :option="option3"
            :containerStyle="{height: '300px',paddingLeft: '20px',boxSizing:'border-box'}"
          />
        </div>
      </div>
    </div>

    <BaseDialog
      :visible.sync="consultVisible"
      title="团队跟进情况"
      width="90%"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto'}"
    >
      <teamFollowUp :rowDate="formDate" :consultData="consultData" :consultOption="consultOption" />
      <div :style="{
            marginTop:'10px',
            textAlign: 'right'
          }">
        <el-button @click="consultcloseVisible">取 消</el-button>
      </div>
    </BaseDialog>
  </div>
</template>

<script>
import { queryFollowCount } from '@/api/dashboard/index';
import Chart1 from '@/charts/preSale/chart1';
import teamFollowUp from './teamFollowUp';
export default {
  name: 'FollowUpStatistics',
  components: {
    Chart1,
    teamFollowUp
  },
  props: {
    rowDate: {
      type: Object,
      default: () => ({})
    },
    rowData: {
      type: Object,
      default: () => ({})
    },
    roleList: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      consultVisible: false,
      consultHandleType: '',
      consultData: [],
      consultOption: {},
      formDate: {},
      option1: {},
      option2: {},
      option3: {},
      showOption2: false
    };
  },
  watch: {
    rowDate(newDate) {
      // this.showOption2 = true;
      this.queryFollowCount(newDate);
    }
  },
  computed: {
    // 日期区间快捷键方法
    createPickers() {
      let days = 7;
      if (days === 0) {
        const start = new Date();
        return {
          startDate: this.formatDate(start, '-'),
          endDate: this.formatDate(start, '-')
        };
      } else {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * Number(days));
        return {
          startDate: this.formatDate(start, '-'),
          periodType: 'day',
          endDate: this.formatDate(end, '-')
        };
      }
    }
  },
  created() {
    this.queryFollowCount(this.rowDate);
  },
  methods: {
    createOption1() {
      return {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          bottom: 10,
          left: 'center',
          data: ['未跟进', '已跟进']
        },
        series: [
          {
            name: '潜客跟进',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '70%'],
            label: {
              normal: {
                position: 'inner'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: []
          }
        ],
        color: ['#FF4D4F', '#1890FF']
      };
    },
    createOption2() {
      return {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.75)',
          axisPointer: {
            lineStyle: {
              color: 'rgba(0,4,10,0.25)'
            }
          }
        },
        legend: {
          left: '24',
          top: '25',
          icon: 'circle',
          itemWidth: 8,
          itemHeight: 8,
          data: ['已跟进', '逾期已跟进', '未跟进', '逾期未跟进'],
          textStyle: {
            color: 'rgba(0,4,10,0.45)'
          }
        },
        xAxis: {
          type: 'category',
          data: [],
          interval: 0,
          rotate: 45,
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: 'rgba(87,90,94,1)'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#EBEBEC'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: 'rgba(0,4,10,0.25)'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(0,4,10,0.08)'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(0,4,10,0.08)'
            }
          }
        },
        series: [
          {
            name: '已跟进',
            type: 'line',
            smooth: true,
            data: [],
            areaStyle: {
              color: "rgba(24,144,255,0.1)"
            },
          },
          {
            name: '逾期已跟进',
            type: 'line',
            smooth: true,
            data: [],
            areaStyle: {
              color: "rgba(82,204,238,0.1)"
            },
          },
          {
            name: '未跟进',
            type: 'line',
            smooth: true,
            data: [],
            areaStyle: {
              color: "rgba(255,197,61,0.1)"
            },
          },
          {
            name: '逾期未跟进',
            type: 'line',
            smooth: true,
            data: [],
            areaStyle: {
              color: "rgba(255,77,79,0.1)"
            },
          }
        ],
        color: ['rgba(24,144,255,1)', 'rgba(82,204,238,1)', 'rgba(255,197,61,1)', 'rgba(255,77,79,1)']
        // color: ['#1890FF', '#52CCEE', '#FFC53D', '#FF4D4F']
      };
    },
    createOption3() {
      return {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.75)',
          axisPointer: {
            lineStyle: {
              color: 'rgba(0,4,10,0.25)'
            }
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          left: '4',
          top: '25',
          icon: 'circle',
          itemWidth: 8,
          itemHeight: 8,
          data: ['已跟进', '逾期已跟进', '未跟进', '逾期未跟进'],
          textStyle: {
            color: 'rgba(0,4,10,0.45)'
          }
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            // margin:2
            padding: [0, 2, 0, 2],
            interval: 0,
            // rotate: 45,
            // formatter:function(value){
            //   return value.split("").join("\n");
            // }
            textStyle: {
              color: 'rgba(87,90,94,1)'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#EBEBEC'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            // margin:2
            padding: [0, 2, 0, 2],
            textStyle: {
              color: 'rgba(0,4,10,0.25)'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(0,4,10,0.08)'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(0,4,10,0.08)'
            }
          }
        },
        series: [
          {
            name: '已跟进',
            type: 'bar',
            stack: '数量',
            barWidth: 10,
            z: 5,
            data: []
          },
          {
            name: '逾期已跟进',
            type: 'bar',
            stack: '数量',
            barWidth: 10,
            z: 5,
            data: []
          },
          {
            name: '未跟进',
            type: 'bar',
            stack: '数量',
            barWidth: 10,
            z: 5,
            data: []
          },
          {
            name: '逾期未跟进',
            type: 'bar',
            stack: '数量',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: [2, 2, 0, 0]
                // shadowOffsetY:30,
                // shadowColor: '#FF4D4F'
              }
            },
            data: []
          }
        ],
        color: ['#1890FF', '#52CCEE', '#FFC53D', '#FF4D4F']
      };
    },
    async queryFollowCount(rowDate) {
      // console.log('queryFollowCount',rowDate)
      /*if (!rowDate.periodType && !rowDate.startDate && !rowDate.endDate) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * Number(7));
        rowDate = {
          startDate:this.formatDate(start, '-'),
          periodType:'day',
          endDate:this.formatDate(end, '-')
        }
      }*/
      if (rowDate.consultant === 0) {
        delete rowDate.consultant;
      }
      this.formDate = rowDate;
      const res = await queryFollowCount(rowDate);
      if (res.resultCode === 200) {
        // console.log(res.data)
        // 潜客跟进
        // let createOption1 = this.createOption1()
        // createOption1.series[0].data = [
        //   {value:res.data.unFollowCount, name:'未跟进', selected:true},
        //   {value:res.data.followCount, name:'已跟进'}
        // ]
        // 潜客跟进日期走势
        let createOption2 = this.createOption2();
        if (rowDate.periodType === 'day') {
          let dataZoom = this.dataZoom();
          createOption2.dataZoom = dataZoom;
        }
        let xAxisData2 = [],
          followedCount2 = [],
          unFollowCount2 = [],
          expireFollowedCount2 = [],
          expireUnFollowCount2 = [];
        res.data.dateList.map(x => {
          switch (rowDate.periodType) {
            case 'day':
              xAxisData2.push(x.period);
              break;
            case 'week':
              xAxisData2.push(`第${x.period}周`);
              break;
            case 'month':
              xAxisData2.push(`${x.period}月`);
              break;
            case 'quarter':
              xAxisData2.push(`${x.year}第${x.period}季度`);
              break;
            default:
              xAxisData2.push(x.period);
              break;
          }
          followedCount2.push(x.followedCount);
          unFollowCount2.push(x.unFollowCount);
          expireFollowedCount2.push(x.expireFollowedCount);
          expireUnFollowCount2.push(x.expireUnFollowCount);
        });
        createOption2.xAxis.data = xAxisData2;
        createOption2.series[0].data = followedCount2;
        createOption2.series[1].data = expireFollowedCount2;
        createOption2.series[2].data = unFollowCount2;
        createOption2.series[3].data = expireUnFollowCount2;
        // 团队跟进情况
        let createOption3 = this.createOption3();
        let xAxisData3 = [],
          followedCount3 = [],
          unFollowCount3 = [],
          expireFollowedCount3 = [],
          expireUnFollowCount3 = [];
        let list = res.data.list.slice(0, 8);
        list.map(x => {
          xAxisData3.push(x.consultantName);
          followedCount3.push(x.followedCount);
          unFollowCount3.push(x.unFollowCount);
          expireFollowedCount3.push(x.expireFollowedCount);
          expireUnFollowCount3.push(x.expireUnFollowCount);
        });
        createOption3.xAxis.data = xAxisData3;
        createOption3.series[0].data = followedCount3;
        createOption3.series[1].data = expireFollowedCount3;
        createOption3.series[2].data = unFollowCount3;
        createOption3.series[3].data = expireUnFollowCount3;
        //重置数据
        // this.option1 = createOption1;
        this.option2 = createOption2;
        this.option3 = createOption3;

        this.consultData = res.data.list;
        this.consultOption = this.createOption3();
      }
    },
    dataZoom() {
      return [
        {
          type: 'inside',
          start: 80,
          end: 100
        },
        {
          start: 80,
          end: 100,
          handleIcon: 'image://',
          handleSize: '80%',
          handleStyle: {
            color: 'rgba(242,244,248,1)',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
          },
          // fillerColor: 'rgba(255, 0, 0, 0.6)',
          borderColor: 'rgba(242,244,248, 1)',
          backgroundColor: '#f2f4f8',
          dataBackground: {
            lineStyle: {
              // color: 'rgba(0,4,10,0.25)',
              width: 0
            },
            areaStyle: {
              color: 'rgba(0,4,10,0.25)',
            }
          },
          textStyle: {
            color: 'rgba(0,0,0,0.65)',
          }
        }
      ];
    },
    // 时间戳转年月日
    formatDate(value, str) {
      // 这里的 value 就是需要过滤的数据
      if (value == null || value == '') {
        return '';
      }
      var date = new Date(Number(value));
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month < 10) {
        month = '0' + month;
      }
      if (day < 10) {
        day = '0' + day;
      }
      return year + str + month + str + day;
    },
    consultShowVisible() {
      this.consultVisible = true;
    },
    consultcloseVisible() {
      this.consultVisible = false;
    },
    resize() {
      this.$refs.Chart1.initial();
      if (this.showOption2) {
        this.$refs.Chart2.initial();
      }
      this.$refs.Chart3.initial();
    }
  }
};
</script>

<style scoped lang="less">
.FollowUpStatistics {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f2f4f8;
  border-radius: 2px;
  // box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  .figure {
    // flex: 1;
    width: 49%;
    background: #fff;
    &:hover {
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    }
    .title {
      height: 58px;
      font-size: 16px;
      font-weight: 500;
      color: @mostColor;
      line-height: 58px;
      border-bottom: 1px solid rgba(0, 4, 10, 0.08);
      padding-left: 20px;
    }
  }
}
</style>
